<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Custom capabilities filter example</title>

    <script src="../../dist/modern/umd/dash.all.debug.js"></script>

    <!-- Bootstrap core CSS -->
    <link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../lib/main.css" rel="stylesheet">

    <style>
        video {
            width: 640px;
            height: 360px;
        }
    </style>

    <script class="code">
        function init() {

            var video,
                player,
                url = "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd";

            var filterCapabilities = async function (representation) {
                /*
                 * This example only illustrates how calls to async functions such as
                 * MediaCapabilitiesAPI can be used with dash.js' CustomCapabilitiesFilter.
                 * Note that dash.js already performs basic capability checks internally.
                 */
                if (navigator.mediaCapabilities) {
                    if (representation.mimeType === "video/mp4") {
                        const mimeType = `${representation.mimeType};codecs="${representation.codecs}"`
                        let cfg = {
                            type: 'media-source',
                            video: {
                                contentType: mimeType,
                                framerate: representation.frameRate,
                                width: representation.width,
                                height: representation.height,
                                bitrate: representation.bandwidth,
                                colorGammut: 'srgb',
                                transferFunction: 'srgb'
                            }
                        };
                        console.log('[sample] Representation '+representation.id+' - Config : %o', cfg);

                        const ok = await navigator.mediaCapabilities.decodingInfo(cfg).then((result) => result.supported);
                        console.log('[sample] MediaCapabilities said ' + ok + ' for Representation-id: ' + representation.id + ' and config: ' + JSON.stringify(cfg, null, 4));
                        return ok;
                    } else {
                        console.log('[sample] Representation '+representation.id+' - mimeType ' + representation.mimeType + ' not subject to filtering.');
                        return true;
                    }
                }
                console.log('[sample] MediaCapabilities API not detected; no filtering applied.');
                return true;
            }

            video = document.querySelector("video");
            player = dashjs.MediaPlayer().create();

            player.registerCustomCapabilitiesFilter(filterCapabilities);

            player.initialize(video, url, true);
            player.updateSettings({
                'debug': {
                    'logLevel': dashjs.Debug.LOG_LEVEL_INFO
                }
            });
        }
    </script>
</head>

<body>

    <main>
        <div class="container py-4">
            <header class="pb-3 mb-4 border-bottom">
                <img class="" src="../lib/img/dashjs-logo.png" width="200">
            </header>
            <div class="row">
                <div class="col-md-4">
                    <div class="h-100 p-5 bg-light border rounded-3">
                        <h3>Custom capabilities filter example</h3>
                        <p>This sample shows how to filter representations by defining a custom capabilities filter
                            function.</p>
                    </div>
                </div>
                <div class="col-md-8">
                    <video controls="true"></video>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div id="code-output"></div>
                </div>
            </div>
            <footer class="pt-3 mt-4 text-muted border-top">
                &copy; DASH-IF
            </footer>
        </div>
    </main>


    <script>
        document.addEventListener('DOMContentLoaded', function () {
            init();
        });
    </script>
    <script src="../highlighter.js"></script>
</body>

</html>
